<template>
  <div class="page-box">
    <div class="page-header">
      <div class="back">
        <!-- <el-icon><ArrowLeftBold /></el-icon> -->
      </div>
      <div class="title">
        {{ type === 1 ? "点餐" : type === 2 ? "订单" : "我的" }}
      </div>
    </div>
    <div class="page-content">
      <template v-if="type == 1">
        <GoodsList />
      </template>
      <template v-else-if="type == 2">
        <OrderList />
      </template>
      <template v-else-if="type == 3">
        <OwnerInfo />
      </template>
    </div>
    <div class="footer-nav">
      <div class="nav-item" @click="changeType(1)" :class="type == 1 ? 'selected' : ''">
        <template v-if="type === 1">
          <img class="icon" src="./images/goods-select.svg" />
        </template>
        <template v-else>
          <img class="icon" src="./images/goods.svg" />
        </template>
        <div class="title">点餐</div>
      </div>
      <div class="nav-item" @click="changeType(2)" :class="type == 2 ? 'selected' : ''">
        <template v-if="type === 2">
          <img class="icon" src="./images/order-select.svg" />
        </template>
        <template v-else>
          <img class="icon" src="./images/order.svg" />
        </template>
        <div class="title">订单</div>
      </div>
      <div class="nav-item" @click="changeType(3)" :class="type == 3 ? 'selected' : ''">
        <template v-if="type === 3">
          <img class="icon" src="./images/owner-select.svg" />
        </template>
        <template v-else>
          <img class="icon" src="./images/owner.svg" />
        </template>
        <div class="title">我的</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import GoodsList from "./GoodsList.vue";
import OrderList from "./OrderList.vue";
import OwnerInfo from "./OwnerInfo.vue";
const type = ref<number>(1);

const changeType = parmas => {
  type.value = parmas;
};
</script>
<style lang="scss" scoped>
.page-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #333333;
    .back {
      position: absolute;
      top: 12px;
      left: 12px;
    }
  }
  .page-content {
    width: 100%;
    height: calc(100% - 100px);
    overflow: hidden;
  }
  .footer-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    border-top: 1px solid #333333;
    .nav-item {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .icon {
        width: 24px;
        height: 24px;
      }
      &.selected {
        .title {
          color: #67c23a;
        }
      }
    }
  }
}
</style>
